  <template>
    <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 sm:p-6">
      <div class="w-full max-w-md">
        <!-- 卡片容器 -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
          <!-- 顶部装饰条 -->
          <div class="h-2 bg-gradient-to-r from-blue-500 to-indigo-600"></div>

          <!-- 内容区域 -->
          <div class="p-8 sm:p-10">
            <!-- Logo和标题 -->
            <div class="text-center mb-8">
              <div class="mx-auto h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mb-4">
                <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
                </svg>
              </div>
              <h2 class="text-2xl font-bold text-gray-800">欢迎回来</h2>
              <p class="text-gray-500 mt-2">请登录您的账号</p>
            </div>

            <!-- 登录表单 -->
            <form class="space-y-5" @submit.prevent="handleLogin">
              <div>
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                <input id="username" v-model="form.username" type="text" required
                  class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
                  placeholder="请输入用户名">
              </div>

              <div>
                <div class="flex justify-between items-center mb-1">
                  <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                  <a href="#" class="text-sm text-blue-600 hover:text-blue-500">忘记密码?</a>
                </div>
                <input id="password" v-model="form.password" type="password" required
                  class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
                  placeholder="请输入密码">
              </div>

              <div class="flex items-center">
                <input id="remember-me" type="checkbox"
                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
              </div>

              <button type="submit" :disabled="loading"
                class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-white bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300"
                :class="{ 'opacity-70 cursor-not-allowed': loading }">
                <svg v-if="loading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
                  fill="none" viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                  </path>
                </svg>
                {{ loading ? '登录中...' : '立即登录' }}
              </button>
            </form>

            <!-- 注册入口 -->
            <div class="mt-6 text-center">
              <p class="text-sm text-gray-500">
                还没有账号?
                <a @click.prevent="navigateTo('/register')"
                  class="font-medium text-blue-600 hover:text-blue-500 cursor-pointer ml-1">
                  立即注册
                </a>
              </p>
            </div>

            <!-- 社交登录 -->
            <!-- <div class="mt-8">
              <div class="relative">
                <div class="absolute inset-0 flex items-center">
                  <div class="w-full border-t border-gray-300"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                  <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                </div>
              </div>

              <div class="mt-4 grid grid-cols-2 gap-3">
                <button type="button"
                  class="w-full inline-flex justify-center items-center py-2 px-4 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                  <svg class="w-5 h-5" fill="#4285F4" viewBox="0 0 24 24">
                    <path
                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                      fill-rule="evenodd" clip-rule="evenodd"></path>
                  </svg>
                  <span class="ml-2">Google</span>
                </button>

                <button type="button"
                  class="w-full inline-flex justify-center items-center py-2 px-4 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                  <svg class="w-5 h-5" fill="#1DA1F2" viewBox="0 0 24 24">
                    <path
                      d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z">
                    </path>
                  </svg>
                  <span class="ml-2">Twitter</span>
                </button>
              </div>
            </div> -->
          </div>
        </div>

        <!-- 底部版权信息 -->
        <div class="mt-8 text-center text-sm text-gray-500">
          © 2023 您的公司. 保留所有权利.
        </div>
      </div>
    </div>
  </template>

  <script setup lang="ts">
  const { login } = useUserApi()
  const { back } = useNavigation()
  const router = useRouter()
  // 方法
  const navigateTo = (path: string) => {
    router.push(path)
  }
  const form = reactive({
    username: 'zrl',
    password: '123456'
  })

  const loading = ref(false)

  definePageMeta({
    layout: 'minimal',
    showHeader: false
  });

  const handleLogin = async () => {
    loading.value = true
    try {
      await login(form)
      // navigateTo('/')
      back();
    } finally {
      loading.value = false
    }
  }

  </script>